<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>影片信息列表</title>
<link type="text/css" rel="stylesheet" href="/vandor/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="/css/style.css">
</head>
<body>
	<div class="container">
		<button id="search-movie-btn" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;&nbsp;查询影片</button>
		<button id="append-movie-btn" class="btn btn-success"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加影片</button>
		<button id="remove-movie-btn" class="btn btn-danger"><i class="fa fa-remove"></i>&nbsp;&nbsp;删除影片</button>
		<div class="search-condition-box" style="display:none">
			<form action="/">
			 <table class="search-condition" border="0" cellspacing="0">
			 	<tr>
			 		<td>影片名称</td>
			 		<td><input type="text" name="name" /></td>
			 		<td>上映时间</td>
			 		<td><input type="date" name="fromDate" />至<input type="date" name="toDate"/></td>
			 	</tr>
			 	<tr>
			 		<td>导演</td>
			 		<td><input type="text" name="director" /></td>
			 		<td>价格</td>
			 		<td><input type="text" name="minPrice" />-<input type="text" name="maxPrice"/></td>
			 	</tr>
			 	<tr>
			 		<td>电影年代</td>
			 		<td><select name="decade">
			 			<option value=""></option>
			 			<option value="2015">2015</option>
			 			<option value="2016">2016</option>
			 			<option value="2017">2017</option>
			 			<option value="2018">2018</option>
			 			<option value="2019">2019</option>
			 		</select></td>
			 		<td>电影时长</td>
			 		<td><input type="text" name="minFilmTime" />-<input type="text" name="maxFilmTime"/></td>
			 	</tr>
			 	<tr>
			 		<td></td>
			 		<td colspan="3">
			 			<button id="do-search-movie-btn" type="submit" class="btn btn-primary">查询影片</button>
			 			<button id="resetCondition" type="reset" class="btn btn-danger">重置条件</button>
			 		</td>
			 	</tr>
			 </table>
			</form>
		</div>
		<table class="data-grid" cellspacing="0" cellpadding="5" id="movie-list">
			<tr>
				<th align="center"><input type="checkbox" id="select-all"/>全选 &nbsp;&nbsp;<a href="javascript:" id="reverse-select">反选</a></th>
				<th>影片名</th>
				<th>导演</th>
				<th>票价</th>
				<th class="sorting ${(sortColumn == 'release_date')?((sortType == 'desc')?'sorting_desc':'sorting_asc'):''}">上映时间</th>
				<th class="sorting ${(sortColumn == 'film_time')?((sortType == 'desc')?'sorting_desc':'sorting_asc'):''}">时长</th>
				<th>类型</th>
				<th class="sorting ${(sortColumn == 'decade')?((sortType == 'desc')?'sorting_desc':'sorting_asc'):''}">年代</th>
				<th>区域</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${moviePage.records }" var="movie">
				<tr>
					<td align="center"><input type="checkbox" class="movie-check" value="${movie.id }"/></td>
					<td>${movie.name }</td>
					<td>${movie.director }</td>
					<td>${movie.price }</td>
					<td><fmt:formatDate value="${movie.releaseDate }" pattern="yyyy-MM-dd"/></td>
					<td>${movie.filmTime }</td>
					<td>${movie.type }</td>
					<td>${movie.decade }</td>
					<td>${movie.area }</td>
					<td>${movie.status }</td>
					<td>
						<a href="#">详情</a>&nbsp;&nbsp;
						<a href="#">编辑</a>&nbsp;&nbsp;
						<c:if test="${movie.status != '即将上映' }">
							<a href="/status?id=${movie.id }&status=${movie.status}">${movie.status == '已经下架' ? '上架' : '下架'}</a>
						</c:if>
					</td>
				</tr>
			</c:forEach>
		</table>
		<div class="pageBar">
			共${moviePage.total }条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<select class="pageSizeSelect" name="pageSizeSelect" >
				<option value="5" ${moviePage.size == 5 ? 'selected':'' }>5条/页</option>
				<option value="10" ${moviePage.size == 10 ? 'selected':'' }>10条/页</option>
				<option value="15" ${moviePage.size == 15 ? 'selected':'' }>15条/页</option>
				<option value="20" ${moviePage.size == 20 ? 'selected':'' }>20条/页</option>
			</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<c:choose>
				<c:when test="${moviePage.current <= 1 }">
					&lt;
				</c:when>
				<c:otherwise>
					<a class="pageBtn" id="prevBtn" href="/?pageNo=${moviePage.current-1 }&pageSize=${moviePage.size}">&lt;</a>
				</c:otherwise>
			</c:choose>
			<c:forEach  begin="1" end="${pages }" var="pageNo">
				<c:choose>
					<c:when test="${moviePage.current == pageNo }">
						${pageNo }
					</c:when>
					<c:otherwise>
						<a class="pageBtn" href="/?pageNo=${pageNo }&pageSize=${moviePage.size}">${pageNo }</a>			
					</c:otherwise>
				</c:choose>
			</c:forEach>
			<c:choose>
				<c:when test="${moviePage.current >= pages }">
					&gt;
				</c:when>
				<c:otherwise>
					<a class="pageBtn" id="nextBtn" href="/?pageNo=${moviePage.current+1 }&pageSize=${moviePage.size}">&gt;</a>
				</c:otherwise>
			</c:choose>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			前往第&nbsp;&nbsp;<select name="pageSelect" >
					<c:forEach  begin="1" end="${pages }" var="pageNo">
						<option class="pageBtn" value="${pageNo }">${pageNo }</option>
					</c:forEach>
			</select>&nbsp;&nbsp;页
		</div>
	</div>
<script type="text/javascript" src="/vandor/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	
	// 全选和全不选切换
	$('#select-all').click(function(){
		if($(this).is(":checked")) {
			$('.movie-check').prop("checked",true)
		}else{
			$('.movie-check').prop("checked",false)
		}
	})
	
	// 反向选择
	$('#reverse-select').click(function(){
		$('.movie-check').each(function(){
			$(this).is(':checked')?$(this).prop("checked",false):$(this).prop("checked",true);
		})
	})
	
	// 选择每页的大小
	$('select[name="pageSizeSelect"]').change(function(){
		var pageSize = $(this).val();
		location = "/?pageNo=1&pageSize="+pageSize;
	})
	// 跳转到某一页
	$('select[name="pageSelect"]').change(function(){
		var pageNo = $(this).val();
		location = "/?pageNo="+pageNo+"&pageSize="+$('select[name="pageSizeSelect"]').val();
	})
	
	// 显示搜索条件框
	$('#search-movie-btn').click(function(){
		var searchConditionBox = $('.search-condition-box');
		if(searchConditionBox.css("display") == "none") {
			searchConditionBox.css("display","block");
		} else {
			searchConditionBox.css("display","none");
		}
	})
	
	
	// 批量删除
	$('#remove-movie-btn').click(function(){
		var checkedInfoList = $('.movie-check:checked');
		if (checkedInfoList.length == 0) {
			alert("请选择要删除的影片信息")
		} else {
			var removeUrl = "/remove?"
			checkedInfoList.each(function(){
				var id = $(this).val();
				removeUrl+="id="+id+"&"
			})
			removeUrl = removeUrl.substring(0,removeUrl.length-1);
			location=removeUrl;
		}
	})
	
	// 字段排序
	$('#movie-list th.sorting').click(function(){
		var $me = $(this);
		var columnName = $me.text();
		var hasDescClass = $me.hasClass('sorting_desc');
		var hasAscClass = $me.hasClass('sorting_asc');
		if(!hasDescClass && !hasAscClass) {
			var sortType = 'desc';
		} else if(hasDescClass && !hasAscClass) {
			var sortType = 'asc';
		} else if(!hasDescClass && hasAscClass) {
			var sortType='desc';
		}
		
		if (columnName == "上映时间"){
			var sortColumn = "release_date";
		}else if(columnName == "时长") {
			var sortColumn = "film_time";
		}else if(columnName == "年代") {
			var sortColumn = "decade";
			
		}
		location="/?sortColumn="+sortColumn+"&sortType="+sortType;
	})
	
	
})
</script>
</body>

</html>